<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      #root,
      #root2 {
        width: 100vw;
        height: 50vh;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        gap: 20px;
        flex-wrap: wrap;
      }
    </style>
    <script src="../js/vue.js" type="text/javascript"></script>
  </head>
  <body>
    <div id="root"></div>
  </body>

  <script type="text/javascript">
    // 定义组件
    const student = Vue.extend({
      template: `
          <div>
              <h2>学生名称：{{name}}</h2>
              <h2>学生年龄：{{age}}</h2>
          </div>
      `,
      data() {
        return {
          name: "Tom",
          age: 18,
        };
      },
      methods: {
        showName() {
          alert(this.name);
        },
      },
    });

    // 定义组件
    const school = Vue.extend({
      components: {
        student,
      },
      template: `
          <div>
              <h2>学校名称：{{name}}</h2>
              <h2>学校地点：{{address}}</h2>
              <button @click="showName">点击提示学校名称</button>
              <hr />
              <!-- 使用组件标签 -->
              <student></student>
          </div>
      `,
      data() {
        return {
          name: "Vue",
          address: "北京",
        };
      },
      methods: {
        showName() {
          alert(this.name);
        },
      },
    });

    // 定义组件
    const hello = Vue.extend({
      template: `
            <div>
                <h2>hello,{{msg}}</h2>
            </div>
        `,
      data() {
        return {
          msg: "Vue",
        };
      },
    });

    // 定义组件
    const app = Vue.extend({
      components: {
        school,
        hello,
      },
      template: `
            <div>
                <hello></hello>
                <school></school>
            </div>
        `,
      data() {
        return {
          msg: "Vue",
        };
      },
    });

    new Vue({
      el: "#root",
      template: `<app></app>`,
      // 注册局部组件
      components: {
        app,
      },
      data: {
        name: "Vue",
      },
    });
  </script>
</html>
